<template>
  <div class="control-div">
    <div style="height: 200px;width: 45px;">
      <div class="layer_nav">
        <el-tooltip class="item" effect="dark" content="图层" placement="left">
        <el-button
          style="padding: 0;background-color: rgba(255, 255, 255,1)"
          class="layer_switch_btn"
          @click="layerSwitchShow = !layerSwitchShow"
        >
          <img
            style="padding-top: 2px;opacity: 1 !important;"
            :src="switchLayerIcon"
          />
        </el-button>
      </el-tooltip>
      </div>
      <div
        class="layer_switch"
        v-show="layerSwitchShow"
      >
        <div
          v-for="layer in layers"
          :key="layer.value"
          :style="'background-image:url(' + layer.src + ');'"
          class="image-div"
          @click="changeLayer(layer.value)"
        >
          <div class="image-title">{{ layer.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vecterUrl from '@/assets/images/vector.png';
import statellitepoiUrl from '@/assets/images/satellitepoi.png';

export default {
  data () {
    return {
      switchLayerIcon: require('@/assets/images/earth.png'),
      // 图层选择图片
      layers: [
        {
          value: 'statellitepoi',
          title: '卫星混合',
          src: statellitepoiUrl
        },
        {
          value: 'vector',
          title: '地图',
          src: vecterUrl
        }
      ],
      // 当前图层值
      cur_layer: 'vector',
      layerSwitchShow: false
    }
  },
  methods: {
    changeLayer (val) {
      this.$emit('changeLayer', val);
      this.layerSwitchShow = false;
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.control-div {
  position: absolute;
  z-index: 999;
  float: right;
  right: 8px;
  bottom: 50px;
  opacity: 0.9;
}

.layer_nav .layer_switch_btn {
  border: 0;
}

.layer_switch {
  position: relative;
  height: 100px;
  width: 160px;
  top: -40px;
  right: 165px;
  border: 1px rgb(10, 10, 10);
  background-color: white;
  display: flex;
  padding: 10px 0;

  .image-div {
    height: 60px;
    width: 60px;
    margin: 0 10px;

    .image-title {
      position: absolute;
      bottom: 5px;
    }
  }
}
</style>